<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head th:replace="fragment/head::head('登录',_)">
    <meta charset="UTF-8">
    <title>loginModail</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
<main class="container">
    <form th:action="@{/authorize}" method="post" class="mx-auto mt-5" style="max-width: 500px">
        <div class="mb-3">
            <label for="loginModalUsername">用户名</label>
            <input id="loginModalUsername" class="form-control" name="username" placeholder="用户名" required>
        </div>
        <div class="mb-3">
            <label for="loginModalPassword">密码</label>
            <input id="loginModalPassword" class="form-control" name="password" placeholder="密码" type="password" required>
        </div>
        <div class="form-check mb-3">
            <label class="form-check-label" for="loginModalRememberMe">记住我</label>
            <input id="loginModalRememberMe" class="form-check-input" name="rememberMe" type="checkbox">
        </div>
        <div class="mb-3" ref="verifyCode">
            <th:block th:replace="fragment/chineseVerifyCode::verifyCode" />
        </div>
        <div class="mb-3">
            <button class="btn btn-primary w-100" >登录</button>
        </div>
        <div class="mb-3">
            <button class="btn btn-secondary w-100 mb-3" th:if="${profile.useQQAuthorize}">
                <img src="../static/img/qq.png" th:src="@{/static/img/qq.png}" style="height: 30px" alt="qq" />
                QQ帐号登录
            </button>
            <button class="btn btn-secondary w-100 lh-1" th:if="${profile.useGithubAuthorize}">
                <i class="bi-github" style="font-size: 30px"></i>
                <span class="align-text-top">GitHub帐号登录</span>
            </button>
        </div>
    </form>
</main>
</body>
</html>
